<template>
    <div>
        <el-row :gutter="15">
            <el-col :span="19">
                <el-card class="order-info">
                    <template #header>
                        <div class="card-header">
                            <h3>订单信息</h3>
                            <span>订单编号：{{order_detail.orderSn}}</span>
                        </div>
                    </template>
                    <el-row :gutter="40">
                        <el-col :span="7" class="flex_zhcenter flex_column">
                            <div class="flex_hcneter">
                                <el-progress type="dashboard" :percentage="100" :stroke-width="8">
                                    <template #default="{ percentage }">
                                        <div style="display: flex; flex-direction: column;">
                                            <template  v-if="order_detail.chargingState == 0">
                                                <template v-if="order_detail.charging_type == 2">
                                                    <span>充电中</span>
                                                </template>
                                                <template v-else-if="order_detail.charging_type == 1">
                                                    <span>充电中</span>
                                                    <span>{{order_detail.endSoc}}</span>
                                                    <span>soc</span>
                                                </template>
                                            </template>
                                            <template v-else>
                                                <template v-if="order_detail.charging_type == 2">
                                                    <span>已支付</span>
                                                </template>
                                                <template v-else-if="order_detail.charging_type == 1">
                                                    <span>已支付</span>
                                                    <span>{{order_detail.endSoc}}</span>
                                                    <span>soc</span>
                                                </template>
                                            </template>
                                        </div>
                                    </template>
                                </el-progress>
                            </div>
                            <span class="flex_hcneter bold">{{order_detail.electricQuantity}} 度</span>
                            <span class="flex_hcneter">充电电量</span>
                        </el-col>
                        <el-col :span="8">
                            <div class="order-amount flex-between">
                                <div class="amount-box">
                                    <span class="label">当前订单金额</span>
                                    <span class="price">{{order_detail.payableAmount}} 元</span>
                                </div>
                                <div class="price-box flex_flex flex_column" style="text-align: right;justify-content: flex-end;align-items: flex-end;">
                                  <div class="flex_hcneter">
                                    <div class="descriptions__label">电费</div>
                                    <div class="descriptions__content">{{order_detail.electricityAmount}}</div>
                                  </div>
                                  <div class="flex_hcneter">
                                    <div class="descriptions__label">服务费</div>
                                    <div class="descriptions__content">{{order_detail.serviceAmount}}</div>
                                  </div>
                                </div>
                            </div>
                            <div class="order-amount flex-between mt20">
                                <div class="amount-box">
                                    <span class="label">实际订单金额</span>
                                    <span class="price">{{order_detail.actualAmount}} 元</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-descriptions size="small" :column="1">
                                    <el-descriptions-item label="充电站">{{order_detail.stationName}}</el-descriptions-item>
                                    <el-descriptions-item label="充电口">{{order_detail.port}}</el-descriptions-item>
                                    <el-descriptions-item label="创建订单">{{order_detail.createTime}}</el-descriptions-item>
                                    <el-descriptions-item label="开始充电">{{order_detail.startTime}}</el-descriptions-item>
                                    <el-descriptions-item label="结束充电">{{order_detail.endTime}}</el-descriptions-item>
                                    <el-descriptions-item label="充电时长">{{order_detail.chargingTime}}</el-descriptions-item>
                                    <el-descriptions-item label="结束原因">{{order_detail.endReason}}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card class="user-info">
                    <template #header>
                        <div class="card-header">
                            <h3>用户信息</h3>
                        </div>
                    </template>
                    <div class="flex_column">
											<!-- v-if="order_detail.userType == 0" -->
                        <!-- <template >

                        </template> -->
												<div @click="show_user(order_detail.userid)" class="flex_column" style="cursor: pointer;">
												    <el-image v-if="order_detail.avatar" :src="order_detail.avatar" style="width: 60px;" />
												    <span>{{order_detail.nickName}}</span>
												    <span>用户ID:{{order_detail.userid}}</span>
												    <!-- <span>{{order_detail.phone}}</span> -->
												</div>
                        <div class="pay-type flex_hcneter">
                            <span class="label">支付方式：</span>
														<dict-tag :options="dict.type.chargin_order_paytype" :value="order_detail.payType"/>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- <el-row :gutter="15" class="mt10">
            <el-col :span="12">
                <el-card class="">
                    <template #header>
                        <div class="card-header">
                            <h3>优惠方式</h3>
                        </div>
                    </template>
                    <div>
                        <el-empty description="本订单未使用优惠券" />
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="">
                    <template #header>
                        <div class="card-header">
                            <h3>获赠奖励</h3>
                        </div>
                    </template>
                    <div>
                        <el-empty description="本订单未获得额外奖励" />
                    </div>
                </el-card>
            </el-col>
        </el-row> -->

        <el-dialog title="用户详情" :visible.sync="dialogVisible" width="70%" append-to-body>
            <Detail :uid="show_uid" />
        </el-dialog>
    </div>
</template>

<script>
    import Enums from "@/utils/enums";
    import {onMounted} from "vue";
    import Detail from "@/components/Common/user/Detail.vue";
    export default {
      name: 'Info',
      components: { Detail },
      dicts:['chargin_order_paytype','chargin_order_status'],
      props: {
        order_detail: {
          type: Object
        },
      },
      data() {
        return {
          dialogVisible:false,
          show_uid:0,
        };
      },
      mounted(){

      },
      methods: {
        show_user(uid){
          return
          this.show_uid = uid
          this.dialogVisible = true
        },
        show_card(card_id){
          // show_card_id.value = card_id
        }
      }
    }
</script>

<style lang="scss" scoped>
    .label {
        color: #8087a0;
    }
    .order-info {
        .el-descriptions {
            :deep(.el-descriptions__body) {
                .el-descriptions__cell {
                    padding-bottom: 0;
                }
            }
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .order-amount {
            display: flex;
            align-items: center;
            //justify-content: center;
            background-color: #eff2f6;
            padding: 10px 20px;
            border-radius: 10px;
            .amount-box {
                display: flex;
                flex-direction: column;
                .price {
                    font-size: 24px;
                    color: #1b2330;
                    font-weight: 600;
                }
            }
            .price-box {
                .el-descriptions {
                    :deep(.el-descriptions__body) {
                        background-color: transparent;
                        .el-descriptions__cell {
                            padding-bottom: 0;
                            .el-descriptions__label {
                                color: #8087a0;
                            }
                        }
                    }
                }
            }
        }

    }
    .user-info {
        .user-type {
            display: flex;
            align-items: center;
            margin-top: 10px;
            > span {
                margin-left: 5px;
                padding: 6px 10px;
                color: #8087a0;
                background-color: #eff2f6;
            }
        }
        .pay-type {
            padding: 10px;
            margin-top: 10px;
            background-color: #eff2f6;
        }
    }
</style>
